<template>
  <div class="drawer-panel" ref="panel" @click.left="closeBullectfun">
    <!-- <DrawerTop></DrawerTop> -->

    <DrawerSearch @search="search"></DrawerSearch>

    <ul>
      <template v-for="item in filterData">
        <DrawerItem :key="item._id" @click.right.native="bullectfun($event, item)">
          <template #icon v-if="item.webIco">
            <img :src="item.webIco" class="ico" />
          </template>
          {{ item.webName }}</DrawerItem
        >
      </template>
    </ul>
    <BullectBox
      @click.left.native="closeBullectfun"
      ref="buBox"
      :options="bullectOpts"
      :showBox="bulletShow"
    ></BullectBox>
  </div>
</template>

<script>
// import DrawerTop from "../asidePanel/Drawer/DrawerTop.vue"
import DrawerSearch from "../asidePanel/Drawer/DrawerSearch.vue"
import DrawerItem from "../asidePanel/Drawer/DrawerItem.vue"
import { mapState, mapActions } from "vuex"
import { AppIdEnum } from "@/constant"
import BullectBox from "../rcbBox/bullectBox.vue"
export default {
  name: "DrawerPanel",
  computed: {
    ...mapState(["drawerCollects"]),
    filterData() {
      return this.drawerCollects.filter((item) => item.webName.includes(this.searchValue))
    }
  },
  data() {
    return {
      searchValue: "",
      bullectOpts: [],
      bulletShow: false
    }
  },
  components: {
    // DrawerTop,
    BullectBox,
    DrawerSearch,
    DrawerItem
  },
  methods: {
    ...mapActions(["moveToDesk", "delCollect", "authJudge"]),
    search(value) {
      this.searchValue = value
    },
    bullectfun(event, app) {
      this.bullectOpts = [
        {
          id: 1,
          title: "放到桌面",
          action: () => {
            this.moveToDesk(app)
          }
        },
        {
          id: 2,
          title: "编辑",
          action: () => {
            this.authJudge().then(() => {
              this.$EventBus.$emit("openWindow", {
                appId: AppIdEnum.COLLECT_MODAL,
                data: {
                  data: { ...app }
                }
              })
            })
          }
        },
        {
          id: 3,
          title: "删除",
          action: () => {
            this.delCollect(app)
          }
        }
      ]
      this.bulletShow = true
      const rect = this.$refs.panel.getBoundingClientRect()
      const left = event.clientX - rect.left
      const top = event.clientY - rect.top

      this.$refs.buBox.$el.style.top = top + "px"
      this.$refs.buBox.$el.style.left = left + "px"
    },
    closeBullectfun() {
      this.bulletShow = false
    }
  }
}
</script>

<style scoped lang="less">
.drawer-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: auto;
  /* top: 10%; */
  /* left: 4rem; */
  /* height: 80%; */
  /* width: 18rem; */
  border-radius: 4px;
  background-color: #fff;
  color: gray;
}
</style>
